import 'package:flutter/material.dart'; // fim简便写法
import 'res/listData.dart';

//  GridView

void main() {
  runApp(MyApp());
}

// 基本结构
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('container  text')),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {

  // @override
  // Widget build(BuildContext context) {
  //   return ListView(children: this._getListData());
  // }

  // 01
  // @override
  // Widget build(BuildContext context) {
  //     return GridView.count(
  //       crossAxisCount: 3,
  //       children: <Widget>[
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //         Text("data"),
  //       ],
  //     );
  // }

// 02
// 容器组件
// List<Widget> _getListData(){
//   List<Widget> list = new List();
//   for(var i=0; i<20; i++){
//     list.add(
//       Container(
//         alignment: Alignment.center,
//         child: Text(
//           '第$i条数据',
//           style: TextStyle(color: Colors.white, fontSize: 20),
//         ),
//         color: Colors.pink,
//       )
//     );
//   }
//    return list;
// }

// 03 GridView.count
  // List<Widget> _getListData() {
  //   var tempList = listData.map((value) {
  //     return Container(
  //       child: Column(
  //         children: <Widget>[
  //           Image.network(value['imagesUrl']),
  //           SizedBox(height: 10),
  //           Text(
  //             value['title'],
  //             textAlign: TextAlign.center,
  //             style: TextStyle(fontSize: 20),
  //           )
  //         ],
  //       ),
  //       decoration: BoxDecoration(
  //           border:
  //               Border.all(color: Color.fromRGBO(233, 233, 133, 0), width: 1)),
  //     );
  //   });
  //   return tempList.toList();
  // }

// 03 GridView.count
  // @override
  // Widget build(BuildContext context) {
  //   return GridView.count(
  //     crossAxisSpacing: 10.0, // 水平 子  Widget 之间间距
  //     mainAxisSpacing: 10.0, // 垂直 子  Widget 之间间距
  //     padding: EdgeInsets.all(10.0),
  //     crossAxisCount: 2, // 一行的 widget 数量
  //     // childAspectRatio: 0.7, // 宽度和高度的比例
  //     children: this._getListData(),
  //   );
  // }

// 04 GridView.builder
  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imagesUrl']),
          SizedBox(height: 10),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          )
        ],
      ),
      decoration: BoxDecoration(
          border:
              Border.all(color: Color.fromRGBO(233, 233, 133, 0.9), width: 1)),
    );
  }

// 04 GridView.builder
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, // 水平 子  Widget 之间间距
        mainAxisSpacing: 10.0, // 垂直 子  Widget 之间间距
        // padding: EdgeInsets.all(10.0),  没这个，间须需要包一层container
        crossAxisCount: 2, // 一行的 widget 数量
      ),
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }

}
